{% extends 'layout.html' %}
{% load static %}
{% load web %}

{% block css %}
    <style>
        .coupon-wechat {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .coupon-wechat p {
            margin-top: 10px;
        }
    </style>
{% endblock %}


{% block content %}
    <div class="row clearfix" style="margin-top: 20px;">
        <div class="col-xs-3">
            {% mine_menu_list request %}
        </div>
        <div class="col-xs-9">
            <div class="panel panel-default">
                <div class="panel-heading" style="background-color: #fafafa">
                    <i class="fa fa-key" aria-hidden="true"></i> 优惠券兑换
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-xs-8">
                            <form class="form-horizontal" method="post" novalidate>
                                {% csrf_token %}
                                {% for field in form %}
                                    <div class="form-group">
                                        <label for="{{ field.id_for_label }}"
                                               class="col-sm-2 control-label">{{ field.label }}</label>
                                        <div class="col-sm-10" style="width: 300px">
                                            {{ field }}
                                            <span style="color: red;font-size: 12px;">{{ field.errors.0 }}</span>
                                        </div>
                                    </div>
                                {% endfor %}

                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <button type="submit" class="btn btn-primary">兑换激活</button>
                                        {% for message in messages %}
                                            <span style="color: green;">{{ message }}</span>
                                        {% endfor %}
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="col-xs-4 coupon-wechat">
                            <img style="width: 150px;"
                                 src="https://video.5xclass.cn/image/default/82ED2823DB414A3EBB9403CBFB144059-6-2.jpg">
                            <p>扫码获取优惠券</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}